<template>
  <div id="index">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="loading">Loading...</dv-loading>
      <div v-else class="host-body">
        <div class="d-flex jc-center">
          <dv-decoration-10 style="width:33.3%;height:.0625rem;" />
          <div class="d-flex jc-center">
            <dv-decoration-8 :color="['#568aea', '#000000']" style="width:2.5rem;height:.625rem;" />
            <div class="title">
              <span class="titleText">大连大学智慧水产养殖平台</span>
              <dv-decoration-6
                class="title-bototm"
                :reverse="true"
                :color="['#50e3c2', '#67a1e5']"
                style="width:3.125rem;height:.1rem;"
              />
            </div>
            <dv-decoration-8
              :reverse="true"
              :color="['#568aea', '#000000']"
              style="width:2.5rem;height:.625rem;"
            />
          </div>
          <dv-decoration-10 style="width:33.3%;height:.0625rem; transform: rotateY(180deg);" />
        </div>

        <!-- 第二行 -->
        <div class="d-flex jc-between px-2">
          <div class="d-flex" style="width: 40%">
            <div
              class="react-right ml-4"
              style="width: 6.25rem; text-align: left;background-color: #0f1325;"
            >
              <span class="react-before"></span>
              <span class="text">数据分析</span>
            </div>
            <div class="react-right ml-3" style="background-color: #0f1325;">
              <span class="text colorBlue">数据分析</span>
            </div>
          </div>
          <div style="width: 40%" class="d-flex">
            <div class="react-left bg-color-blue mr-3">
              <span class="text fw-b">数据大屏</span>
            </div>
            <div
              class="react-left mr-4"
              style="width: 6.25rem; background-color: #0f1325; text-align: right;"
            >
              <span class="react-after"></span>
              <span class="text">{{dateYear}} {{dateWeek}} {{dateDay}}</span>
            </div>
          </div>
        </div>

        <transition name="fade">
            <div class="bodying-box" v-if="$store.state.views === 0">
                <!--          数据大屏左侧-->
                <div class="row-wrapper">
                    <div class="third-box">
                        <div class="third-top">
                            <dv-border-box-12>
                                <div class="inner">
                                    <introduction></introduction>
                                </div>
                            </dv-border-box-12>
                        </div>
                        <div class="third-bottom">
                            <dv-border-box-13>
                                <div class="inner">
                                    <weather></weather>
                                </div>
                            </dv-border-box-13>
                        </div>
                    </div>
                    <!--          中间-->
                    <div class="fourth-box">
                        <div class="fourth-top">
                            <dv-border-box-8 :reverse="true">
                                <div class="inner">
                                    <videoLook></videoLook>
                                </div>
                            </dv-border-box-8>
                        </div>
                        <div class="fourth-bottom">
                            <dv-border-box-12 :reverse="true">
                                <div class="inner">
                                    <envirment></envirment>
                                </div>
                            </dv-border-box-12>
                        </div>
                    </div>
                    <!--          右边-->
                    <div class="fifth-box">
                        <div class="fifth-top">
                            <dv-border-box-13>
                                <div class="inner">
                                    <console></console>
                                </div>
                            </dv-border-box-13>
                        </div>
                        <div class="fifth-center">
                            <dv-border-box-12>
                                <div class="inner">
                                    <warn></warn>
                                </div>
                            </dv-border-box-12>
                        </div>
                        <div class="fifth-bottom">
                            <dv-border-box-3>
                                <div class="inner">
                                    <forecast></forecast>
                                </div>
                            </dv-border-box-3>
                        </div>
                    </div>
                </div>
            </div>
        </transition>
        <transition name="fade">
            <div v-if="$store.state.views === 1">
                <secondaryInterface></secondaryInterface>
            </div>
        </transition>
        <transition name="fade">
            <div v-if="$store.state.views === 3">
                <thirdInterface></thirdInterface>
            </div>
        </transition>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import { formatTime } from '../utils/index.js'
import introduction from "./introduction/introduction";
import weather from "./weather/weather";
import videoLook from "./videoLook/videoLook";
import envirment from "./environment/envirment";
import console from "./console/console";
import warn from "./warn/warn";
import forecast from "./forecast/forecast";
import secondaryInterface from "./console/secondaryInterface/secondaryInterface";
import thirdInterface from "./console/thirdInterface/thirdInterface";
import Axios from "axios";

export default {
  data () {
    return {
      loading: true,
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
    };
  },
  components: {
    // profile,
    introduction,
      weather,
      videoLook,
      envirment,
      console,
      warn,
      forecast,
      secondaryInterface,
      thirdInterface
  },
    created() {
        Axios.get('http://49.232.131.98/mqtt/data/list').then((res) => {
            // console.log(res);
            let a = res.data.data.data
            // console.log(a)
            var timeAr = []
            var temAr = [];
            var oxAr = [];
            var phAr = [];
            var saltAr = [];
            var nhAr = [];
            var zhuoAr = [];
            for(var i=0;i<a.length;i++){
                // this.$store.state.temArr.push(a[i].temperature)
                // this.$store.state.oxArr.push(a[i].dissolvedOxygen)
                // this.$store.state.phArr.push(a[i].phValue)
                // this.$store.state.saltArr.push(a[i].salinity)
                temAr.push(a[i].temperature)
                oxAr.push(a[i].dissolvedOxygen)
                phAr.push(a[i].phValue)
                saltAr.push(a[i].salinity)
                nhAr.push(a[i].anconcentration)
                zhuoAr.push(a[i].turbidity)
                timeAr.push(a[i].createTime)
            }
            this.$store.state.temArr = temAr
            this.$store.state.oxArr = oxAr
            this.$store.state.phArr = phAr
            this.$store.state.saltArr = saltAr
            this.$store.state.nhArr = nhAr
            this.$store.state.zhuoArr = zhuoAr
            this.$store.state.timeInfor = timeAr
            // this.totalInfor = res
        }).catch((err) => {

            console.log(err)

        })
    },
    mounted () {
    this.timeFn();
    this.cancelLoading();
  },
  methods: {
    timeFn () {
      setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss');
        this.dateYear = formatTime(new Date(), 'yyyy-MM-dd');
        this.dateWeek = this.weekday[new Date().getDay()];
      }, 1000)
    },
    cancelLoading () {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    }
  }
};
</script>

<style lang="scss">
@import '../assets/scss/index.scss';
.titleText{
    zoom:0.75;
  font-size: 0.275rem;
  line-height: 0.5rem;
}
  .bodying-box{
      .row-wrapper{
          width: 100%;
          display: flex;
          flex-flow: row nowrap;
      }
  }
  .inner{
      padding: 0.276rem;
  }
  .third-box{
      height: 11rem;
      flex: 1;
      .third-top{
          width: 100%;
          height: 40%;
      }
      .third-bottom{
          width: 100%;
          height: 60%;
      }
  }
  .fourth-box{
      flex: 2;
      height: 11rem;
      .fourth-top{
          height: 30%;
          width: 100%;
          .inner{
              height: 100%;
              width: 100%;
          }
      }
      .fourth-bottom{
          height: 70%;
          width: 100%;
          .inner{
              height: 100%;
              width: 100%;
          }
      }
  }
  .fifth-box{
      flex: 1;
      height: 11rem;
      .fifth-top{
          height: 35%;
          width: 100%;
          .inner{
              height: 100%;
              width: 100%;
          }
      }
      .fifth-center{
          height: 35%;
          width: 100%;
          .inner{
              height: 100%;
              width: 100%;
          }
      }
      .fifth-bottom{
          height: 30%;
          width: 100%;
          .inner{
              height: 100%;
              width: 100%;
          }
      }
  }
    .fade-enter-active, .fade-leave-active {
        transition: opacity 0.5s;
    }
    .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
        opacity: 0;
    }
</style>
